<template>
	<view style="padding-bottom: 50rpx;">
		<page-head :title="'预约详情'" :headtype="2"></page-head>
		<!-- 教练 -->
		<view class="jllist" v-if="datas.partner_username">
			<view class="jlitem marginAuto flex">
				<view class="jlitemimg">
					<image :src="apifun.URLimg + datas.partner_avatar" mode=""></image>
				</view>
				<view class="jlitemmsg">
					<view class="jlitemm-name" style="margin-top:8rpx;">
						<view class="jlitemm-namem">{{ datas.partner_username }}</view>
						<view class="jlq" style="margin: 10rpx 0 20rpx;">{{ datas.partner_age }}岁</view>
					</view>
					<view class="jlitemmb">
						<view class="jlq">{{ datas.partner_service_num }}次服务</view>
						<view class="jlq">{{ datas.partner_drive_age }}年驾龄</view>
					</view>
					<view class="jlitemmdoc">{{ datas.partner_brand }} / {{ datas.partner_shap }} / {{ datas.partner_gears }} / {{ datas.partner_type }}</view>
				</view>
			</view>
		</view>
		<!-- 陪驾信息 -->
		<view class="dritem marginAuto">
			<view class="dritemgoods flex">
				<view class="cardeachbimg">
					<image class="goodsimg" :src="apifun.URLimg+datas.menu_image" mode=""></image>
				</view>
				<view class="cardeachbmsg">
					<view class="cardeachbmsg-name flex">
						<view class="cardeachbmsg-namen ellipsis01">{{ datas.menu_name }}</view>
						<view class="cardeachbmsg-namestatus mainColor">剩余{{ datas.menu_residue_time }}小时</view>
					</view>
					<view class="starty">
						<view class="jlq">{{ datas.menu_min_time }}小时起约</view>
					</view>
					<view class="cardeachbmsg-jl">
						<text style="color:#FC2A2A;font-size:24rpx;">￥</text>
						<text style="color:#FC2A2A;font-size:36rpx;">{{ datas.menu_price }}</text>
						<text style="color:#666666;font-size:24rpx;margin-left: 20rpx;text-decoration: line-through;">￥{{ datas.menu_old_price }}</text>
					</view>
					<view class="cardeachbmsg-site flex">
						<view class="site flex">有效期至：{{ datas.menu_end_time }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="status marginAuto">联系信息</view>
		<view class="listmsg marginAuto">
			<view class="itemmsg flex marginAuto">
				<view class="itemmsgtitle">姓名：</view>
				<view class="itemmsgr">{{ datas.username }}</view>
			</view>
			<view class="itemmsg flex marginAuto">
				<view class="itemmsgtitle">电话：</view>
				<view class="itemmsgr flex" @click="callphone(datas.user_mobile)">
					<text>{{ datas.user_mobile }}</text>
					<uv-icon name="phone-fill" size="20" color="#999999"></uv-icon>
				</view>
			</view>
			<view class="itemmsg flex marginAuto">
				<view class="itemmsgtitle">预约时间：</view>
				<view class="itemmsgr">{{ datas.reserve_time_txt }}</view>
			</view>
			<view class="itemmsg flex marginAuto" style="padding-bottom:0rpx;">
				<view class="itemmsgtitle" style="line-height:60rpx;">预约地址：</view>
				<view class="itemmsgr" style="width:70%;">
					<view class="itemmsgr-qy ellipsis01" style="text-align:right;">{{ datas.address }}</view>
					<!-- <view class="itemmsgr-site ellipsis01" style="text-align:right;font-size: 24rpx;color:#666666;">南三环汽车城1号楼1023凯迪拉克4S店</view> -->
				</view>
			</view>
		</view>
		<view class="status marginAuto">下单信息</view>
		<view class="listmsg marginAuto" style="padding-bottom: 0;">
			<view class="itemmsg flex marginAuto">
				<view class="itemmsgtitle">订单号：</view>
				<view class="itemmsgr">{{ datas.order_sn }}</view>
			</view>
			<view class="itemmsg flex marginAuto">
				<view class="itemmsgtitle">下单时长：</view>
				<view class="itemmsgr">{{ datas.duration }}小时</view>
			</view>
			<view class="itemmsg flex marginAuto" v-if="datas.reserve_time">
				<view class="itemmsgtitle">预约时间：</view>
				<view class="itemmsgr">{{ $uv.timeFormat(datas.reserve_time,'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
			<view class="itemmsg flex marginAuto">
				<view class="itemmsgtitle">提交时间：</view>
				<view class="itemmsgr">{{ datas.create_time }}</view>
			</view>
			<view class="itemmsg flex marginAuto" v-if="datas.accept_time">
				<view class="itemmsgtitle">匹配教练时间</view>
				<view class="itemmsgr">{{ $uv.timeFormat(datas.accept_time,'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
			<view class="itemmsg flex marginAuto" v-if="datas.complete_time">
				<view class="itemmsgtitle">完成时间</view>
				<view class="itemmsgr">{{ $uv.timeFormat(datas.complete_time,'yyyy-mm-dd hh:MM:ss') }}</view>
			</view>
		</view>
		<view class="status marginAuto">下单备注</view>
		<view class="ordermsg marginAuto">{{ datas.remark }}</view>
		<block v-if="datas.eval">
			<view class="status marginAuto">教练评价</view>
			<view class="ordermsg marginAuto">{{ datas.eval }}</view>
		</block>
		<!-- <view class="marginAuto" style="width:600rpx;margin-top:60rpx;">
			<uv-button text="评价" @click="apifun.navigate('/pages/my/mydrivermakeev')" :customStyle="{
				'background':'#1686F8',
				'color':'#ffffff',
				'font-size':'30rpx',
				'width':'600rpx',
				'height':'100rpx',
				'border-radius':'100rpx'
			}"></uv-button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun:this.apifun,
				id:'',
				datas:{}
			};
		}, 
		onLoad(option) {
			this.id = option.id;
			this.initData()
		},
		methods: {
			callphone(phone){
				uni.makePhoneCall({
					phoneNumber:phone
				})
			},
			initData(){
				let sendData = {
					id:this.id
				}
				this.apifun.unirequest('/api/partnerDrive/getReserveInfo','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.datas = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.status{
		width: 690rpx;
		font-size: 34rpx;
		color: #222222;
		padding: 20rpx 0 0;
		font-weight: 600;
	}
	// 人员
	.jlitem{
		position: relative;
		margin-top: 20rpx;
		width:690rpx;
		padding:10rpx 0;
		background: #fff;
		border-radius: 10rpx;
		.jlitemimg{
			width: 250rpx;
			height: 220rpx;
			image{
				width: 250rpx;
				height: 220rpx;
				border-radius: 6rpx;
			}
		}
		.jlitemmsg{
			margin-left: 24rpx;
			width: 80%;
			.jlitemm-name{
				.jlitemm-namem{
					color: #222222;
					font-size: 30rpx;
					line-height:40rpx;
					margin-right: 10rpx;
				}
				.jlq{
					display: inline-block;
					padding:0 10rpx;
					background:#FFEFE4;
					color:#FF720C;
					font-size:20rpx;
					border-radius:6rpx;
					height:40rpx;
					line-height:40rpx;
					margin-right: 10rpx;
				}
			}
			.jlitemmb{
				.jlq{
					display: inline-block;
					padding:0 10rpx;
					background:#EAF1FF;
					color:#1686F8;
					font-size:20rpx;
					border-radius:6rpx;
					height:40rpx;
					line-height:40rpx;
					margin-right: 10rpx;
				}
			}
			.jlitemmdoc{
				color:#666666;
				font-size: 24rpx;
				margin-top: 20rpx;
			}
		}
	}
	// 项目
	.dritem{
		width: 690rpx;
		padding:10rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		.dritem-top{
			justify-content: space-between;
			padding: 10rpx 0;
			.dritemtl{
				.jlq{
					display: inline-block;
					padding:0 10rpx;
					background:#FFEFE4;
					color:#FF720C;
					font-size:20rpx;
					border-radius:6rpx;
					height:50rpx;
					line-height:50rpx;
					margin-right: 10rpx;
				}
				.dritemtltxt{
					font-size: 28rpx;
					color: #222222;
					line-height: 50rpx;
				}
			}
			.dritemtr{
				font-size: 26rpx;
				line-height: 50rpx;
			}
		}
		.dritemgoods{
			padding: 20rpx 0;
			.cardeachbimg{
				position: relative;
				width: 250rpx;
				height: 210rpx;
				.goodsimg{
					width: 250rpx;
					height: 210rpx;
					border-radius:10rpx;
				}
			}
			.cardeachbmsg{
				flex: 1;
				margin-left: 20rpx;
				.cardeachbmsg-name{
					color: #333333;
					font-size:30rpx;
					line-height: 50rpx;
					justify-content: space-between;
					.cardeachbmsg-namen{
						width:60%;
						font-weight: 600;
					}
					.cardeachbmsg-namestatus{
						font-size: 26rpx;
					}
				}
				.starty{
					padding:5rpx 0;
					.jlq{
						display: inline-block;
						padding:0 10rpx;
						background:#E7F2FF;
						color:#0089FB;
						font-size:20rpx;
						border-radius:6rpx;
						height: 40rpx;
						line-height: 40rpx;
						margin-right: 10rpx;
					}
				}
				.cardeachbmsg-jl{
					padding-top: 10rpx;
					font-size: 26rpx;
					line-height:40rpx;
				}
				.cardeachbmsg-site{
					.site{
						font-size: 24rpx;
						color: #666666;
						line-height: 50rpx;
					}
				}
			}
		}
	}
	// 信息
	.listmsg{
		width:630rpx;
		padding: 30rpx;
		border-radius: 20rpx;
		background: #fff;
		margin-top: 20rpx;
		.itemmsg{
			padding-bottom:50rpx;
			line-height: 50rpx;
			justify-content: space-between;
			.itemmsgtitle{
				color: #333333;
				font-size: 28rpx;
			}
			.itemmsgr{
				color: #333333;
				font-size: 30rpx;
			}
		}
	}
	.ordermsg{
		width: 630rpx;
		padding:25rpx;
		background: #fff;
		border-radius:20rpx;
		margin-top: 20rpx;
	}
</style>